<template>
	<view class="can-scroll">
        <view class="container">
			<view class="top-result">
				<view class="result">
					<view class="img-back">
						<view class="img1"></view>
					</view>
					<view class="result-content">
						<p>舌象：舌青苔厚干燥</p>
						<p>主症：津亏</p>
					</view>
				</view>
				<view class="tip">
					<p>拍摄时，运动模糊、光照条件、拍摄位置远近角度及污渍残渣会影响诊断结果。</p>
				</view>
			</view>

			<view class="tongue">
				<view class="title">
					<p>舌象分析</p>
				</view>
				<view class="total-content">
					<view class="img2-box"></view>
					<view class="content">
						<view>
							<p class="big-text-fat"><text class="iconfont">&#xe6a5;</text>舌体颜色</p>
							<p class="small-text">青舌</p>
						</view>
						<view>
							<p class="big-text-fat"><text class="iconfont">&#xe6a5;</text>舌苔颜色</p>
							<p class="small-text">白苔</p>
						</view>
						<view>
							<p class="big-text-fat"><text class="iconfont">&#xe6a5;</text>舌苔苔质</p>
							<p class="small-text">厚苔、燥苔</p>
						</view>
					</view>
				</view>
				<view class="detail">
					<view>
						<p class="big-text"><text class="iconfont">&#xe6a3;</text>苔质：厚苔</p>
						<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太开心😃？多喝热水啊你要好好👍！我不喜欢别人</p>
					</view>
					<view>
						<p class="big-text"><text class="iconfont">&#xe6a3;</text>苔质：燥苔</p>
						<p class="small-text">最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃就可以随便说么这就不是真的喜欢么是吧哈你</p>
					</view>
					<view>
						<p class="big-text"><text class="iconfont">&#xe6a3;</text>苔色：白苔</p>
						<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃</p>
					</view>
					<view>
						<p class="big-text"><text class="iconfont">&#xe6a3;</text>舌色：青舌</p>
						<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别水啊你我不喜欢别人给我们讲我</p>
					</view>
				</view>
			</view>

			<view class="zhuzhengfenxi">
				<view class="title">
					<p>主症分析</p>
				</view>
				<view class="blue-border">
					<p class="big-text-fat" style="color:blue; font-size: 27rpx;"><text class="iconfont">&#xe6a3;</text>您的主症为：津亏</p>
					<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃</p>
				</view>
				<view class="blue-box">
					<p class="big-text-fat"><text class="iconfont">&#xe6a3;</text>病机分析及临床表现</p>
					<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃</p>
				</view>
			</view>

			<view class="eat-command">
				<view class="title">
					<p>膳食推荐</p>
				</view>
				<view class="green-border">
					<p class="big-text-fat" style="color:green"><text class="iconfont">&#xe6a3;</text>宜吃膳食</p>
					<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃</p>
				</view>
				<view class="red-border">
					<p class="big-text-fat" style="color:red"><text class="iconfont">&#xe6a3;</text>忌吃膳食</p>
					<p class="small-text">你的段落蚊子都是我最喜欢吃辣了吧笑哈拉我也太？多喝热水啊你我不喜欢别人给我们讲我是什么东西都是假货了吗这不是说你不爱吃</p>
				</view>
			</view>

			<view class="dish-command">
				<p class="dish-name">* 乌梅三豆饮 *</p>
				<view class="ahead1"><p>材 料</p></view>
				<view class="meterial">
					<view class="meterial-row"><p class="meterial-name">乌梅: </p><span class="meterial-weight">30g</span></view>
					<view class="meterial-row"><p class="meterial-name">冰糖: </p><span class="meterial-weight">适量</span></view>
					<view class="meterial-row"><p class="meterial-name">黄豆: </p><span class="meterial-weight">30g</span></view>
					<view class="meterial-row"><p class="meterial-name">绿豆: </p><span class="meterial-weight">30g</span></view>
					<view class="meterial-row"><p class="meterial-name">黑豆: </p><span class="meterial-weight">30g</span></view>
				</view>
				<view class="ahead2"><p>做法</p></view>
				<view>
					<view class="method">
						<p>1、黑豆、黄豆、绿豆、乌梅各30g，冰糖适量，煮两小时代茶服</p>
						<p>2、黑豆、黄豆、绿豆、乌梅各30g，冰糖适量，煮两小时代茶服茶服回家好好就赶快赶快客户</p>
					</view>
				</view>
				<view class="ahead3"><p>注意</p></view>
				<view>
					<view class="attention">                
						<p>黑豆、黄豆、绿豆、乌梅各30g，冰糖适量，煮两小时代茶服回家好好就赶快赶快客户客户客户看沟通</p>
					</view>
				</view>
				<view class="dish-img">
					<image src="../../static/images/dish.jpg"></image>
					<p class="img-src">*图片来源：下载自年华似水*</p>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    name: 'DiagnosePage',
    data() {
        return {
            // 可在此添加页面所需数据，如动态诊断结果、食谱列表等
        };
    },
    onLoad() {
        // 页面加载时的初始化操作，如获取舌象诊断数据
    },
    methods: {
        // 可添加交互方法，如查看更多食谱、重新诊断等
    }
};
</script>

<style scoped>
@import "../../common/common.css";
@import "../../static/icon/font/iconfont.css";
@font-face {
	font-family: "iconfont"; /* Project id  */
	src: url('iconfont.ttf?t=1756094115315') format('truetype');
}

page{
	background-color: rgb(216, 235, 227);   
}
h2{
	text-align: center;
}
.container{
	width: 96%;
	margin: 20rpx auto;
	display: flex;
	flex-direction: column;
	gap:20rpx;
	padding-top: 10rpx;
}
.top-result{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}
.result{
	width: 100%;
	height: 140rpx;
	border: 3rpx solid #fff;
	background-color: rgba(110,189,204,0.9);/*rgba(149,191,150,1);*/
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20rpx;
	gap:8%;
	box-shadow:  0rpx 0rpx 12rpx rgba(0,0,0,0.1), 
				 0rpx 0rpx 12rpx rgba(0,0,0,0.1);
}
.img-back{
	width: 110rpx;
	height:110rpx;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.img1{
	width: 100rpx;  /*0.9倍 */
	height: 92rpx;
	background-image: url("../../static/icon/sucai.png");
	background-size: 679rpx auto;
	background-position: -200rpx 0;
}
.result-content p{
	font-size: 28rpx;
	font-weight: bold;
	color:#fff;
	margin: 15rpx 0;
}
.tip{
	width: 100%;
	/* background-color: rgba(0,0,255,0.1); */
	padding: 0rpx 10rpx;
	box-sizing: border-box;
	font-size: 8rpx;
	color:red;/*#c77044;*/
}

/* 舌象分析 */
.tongue , .zhuzhengfenxi, .eat-command{
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow:  0rpx 0rpx 12rpx rgb(0,0,0,0.1), 
				 0rpx 0rpx 12rpx rgb(0,0,0,0.1);
	padding: 15rpx 6%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.total-content{
	display: flex;
	gap: 10%;
	align-items: center;
	justify-content: center;
	margin: 20rpx 6%;
}
.title{
	width: 25%;
	height: 50rpx;
	background-color: rgba(205,185,186,0.8);
	margin: 10rpx auto;
	text-align: center;
	border-radius: 20rpx;
	box-shadow:  0rpx 0rpx 12rpx rgb(0,0,0,0.1), 
				 0rpx 0rpx 12rpx rgb(0,0,0,0.1);
	padding: 0 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}        
.title p{
	border-right: 2rpx solid #fff;
	border-left: 2rpx solid #fff;
	padding: 0 8rpx;
	font-size: 28rpx;
	font-weight: bold;
}
.img2-box{
	width: 288rpx;
	height: 288rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 10rpx;
	border: 1rpx solid #c3b8b3;
	background-image: url("../../static/images/tongue.jpg");
	background-position: center;
	background-size: 300rpx;
	background-repeat: no-repeat;
}
.total-content .content{
	display: flex;
	flex-direction: column;
	gap:8%;
	text-align: center;
}
.iconfont{
	font-size: 24rpx;
	margin-right: 3rpx;
	font-weight: bold;
}
.content .iconfont{            
	color: rgb(255, 255, 255);
	background-color: rgb(32, 145, 32);
	border-radius: 50%;
}
.big-text{
	font-size: 24rpx;
	margin: 8rpx 0;
	padding-top: 8rpx;
}
.big-text-fat{
	font-size: 24rpx;
	margin: 8rpx 0;
	font-weight: 500;
}
.small-text{
	font-size: 14rpx;
	margin-bottom: 15rpx;
	margin-top: 0rpx;
	padding-left: 28rpx;
}
.detail{
	background-color: rgba(216,235,227);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	margin: 20rpx auto;
}
.detail .iconfont, .zhuzhengfenxi .iconfont, .eat-command .iconfont{
	font-size: 24rpx;
	margin-right: 3rpx;
	font-weight: bold;
	color: rgb(32, 145, 32);
}
.zhuzhengfenxi .iconfont{
	color:#fff;
}
.detail .big-text{
	border-top: 1rpx solid #fff;
}
.blue-border,.blue-box, .green-border, .red-border{
	padding: 6rpx;
	border-radius: 20rpx;
	margin: 15rpx 0;
}
.blue-border{
	box-shadow: 0 0 8rpx 8rpx rgba(189,228,230, 0.8); 
}
.red-border{
	box-shadow: 0 0 8rpx 8rpx rgba(255,0,0, 0.3);
}
.green-border{
	box-shadow: 0 0 8rpx 8rpx rgba(0,255,0, 0.4);
}
.blue-box{
	background-color: rgba(189,228,230,1);
	box-shadow: 0 0 6rpx 2rpx rgba(0,0,0, 0.1);
}

.dish-command{
	gap:10rpx;
	background-color: rgb(240, 244, 221);
	border-radius: 20rpx;
	box-shadow:  0rpx 0rpx 12rpx rgb(0,0,0,0.1), 
				 0rpx 0rpx 12rpx rgb(0,0,0,0.1);
	padding-bottom: 30rpx;
}
.dish-command>p{
	font: 24rpx;
	text-align: center;
	margin: 20rpx auto;
}
.ahead1, .ahead2, .ahead3{
	width: 80rpx;
	text-align: center;
	margin-left: 10%;
	margin-top: 25rpx;
}
.ahead1 p, .ahead2 p, .ahead3 p{
	margin-bottom: 5rpx;
} 
.ahead1{
	background-color: #b6c030;
}
.ahead2{
	background-color: #5bc030;
}
.ahead3{
	background-color: #b3430c;
	color:#fff;
	margin-top: 30rpx;
}
.meterial, .method, .attention{
	background-color: rgb(255, 255, 255);
	width: 80%;
	margin:auto;
	padding: 10rpx 20rpx;
	/* border-radius: 20rpx; */
}
.meterial-row{
	display: flex;
	text-align: center;
	align-items: center;
}
.meterial-name{
	margin-right: 10rpx;
}
.dish-img{
	text-align: center;
	font-size: 12rpx;
	color:#c3b8b3;
	margin-top: 20rpx;
}
.attention p{
	color: #c77044;
	font-size: 14rpx;
}
.meterial, .method p{
	font-size: 14rpx;
}
</style>